import React from 'react';
import { Chart } from '@antv/g2';

const data = [
    { year: '1991', value: 3, height: 101, weight: 22 },
    { year: '1992', value: 4, height: 121, weight: 23 },
    { year: '1993', value: 3.5, height: 125, weight: 24 },
    { year: '1994', value: 5, height: 130, weight: 26 },
    { year: '1995', value: 4.9, height: 132, weight: 26 },
    { year: '1996', value: 6, height: 135, weight: 26 },
    { year: '1997', value: 7, height: 140, weight: 28 },
    { year: '1998', value: 9, height: 150, weight: 32 },
    { year: '1999', value: 13, height: 160, weight: 46 },
];
var chart;
class G2LineBsc extends React.Component {
    componentDidMount() {
        this.props.onRef(this);
        this.chartInit();
    }
    chartInit=()=>{
        chart = new Chart({
            container: 'G2LineBsc',
            autoFit: true,
            height: 300,
        });
        chart.data(data);        
        chart.scale({
            year: {
                range: [0, 1],
            },
            height: {
                nice: true,
            },
        });

        chart.legend({
            custom: true,
            items: [
                { name: '身高', value: 'height', marker: { symbol: 'line', style: { stroke: '#1890ff', lineWidth: 2 } } },
                { name: '体重', value: 'weight', marker: { symbol: 'line', style: { stroke: '#2fc25b', lineWidth: 2 } } },
            ],
        });

        chart.tooltip({
            showCrosshairs: true, // 展示 Tooltip 辅助线
            shared: true,
        });

        //chart.line().position('year*value').label('value');
        chart.line().position('year*height').color('#1890ff');
        chart.line().position('year*weight').color('#2fc25b');
        chart.point().position('year*height');
        chart.point().position('year*weight');        
    }
    loadData=()=>{
        const { ParentData } = this.props;
        chart.changeData(ParentData);
        chart.render(true);
    }
    render() {
        return (
            <div id='G2LineBsc'></div>
        )
    };
}
export default G2LineBsc;